<template>
  <div  v-loading.fullscreen.lock="loading"  element-loading-background="rgba(0, 0, 0, 0.8)">
    <!-- <p style="font-size:30px;color:#f90;text-align:center;position: absolute;top: 50%;left: 50%;margin-top:-20px;">该功能尚未开发!</p> -->
    <div class="header">
      <el-row :gutter="20">
        <el-col :span="3">
            <el-select filterable clearable v-model="getListData.classifyChannelType" size="mini" placeholder="所属频道">
              <el-option
                v-for="item in searhFormData.channelOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-col>
        <el-col :span="3">
          <el-input filterable clearable size="mini" placeholder="分类名称" v-model="getListData.classifyInfo"></el-input>
        </el-col>
        <el-col :span="3">
            <el-select filterable clearable v-model="getListData.classifyIsstart" size="mini" placeholder="状态">
              <el-option
                v-for="item in searhFormData.stateOptions"
                :key="item.id"
                :label="item.text"
                :value="item.id">
              </el-option>
            </el-select>
        </el-col>
        <el-col :span="8">
            <el-button-group>
              <el-button size="mini"  @click="search">查询</el-button>
              <el-button size="mini"  @click="showAdd" type="primary">新增</el-button>
            </el-button-group>
        </el-col>
      </el-row>
    </div>
    <div class="list">
      <el-table stripe :data="dataSource" >
        <el-table-column prop="classifyId"  label="ID" ></el-table-column>
        <el-table-column prop="classifyInfo" label="分类名称" ></el-table-column>
        <el-table-column prop="classifyCustominfo1" min-width="200" label="分类介绍" ></el-table-column>
        <el-table-column prop="classifyChannelTypeName" label="所属频道" ></el-table-column>
        <el-table-column prop="classifyIsstartInfo" label="状态"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
          <el-button-group>
            <el-button  type="default" icon="el-icon-edit" @click="showUpdate(scope.row)" size="mini">编辑</el-button>
            <el-button  type="default" icon="el-icon-delete" @click="updateStatus(scope.row,1)"   size="mini" v-if="scope.row.classifyIsstart==0">禁用</el-button>
            <el-button  type="default" icon="el-icon-delete"  @click="updateStatus(scope.row,0)" size="mini" v-if="scope.row.classifyIsstart==1">启用</el-button>
          </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paginationData.currentPage"
        :background="true"
        :page-sizes="paginationData.pageSizes"
        :page-size="paginationData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationData.total">
      </el-pagination>
 <!--添加分类-->
    <el-dialog title="添加分类"
    :visible.sync="dialog.addBox"
    width="400px"
    @close="closeAddRules('addRules')"
    :close-on-click-modal="false">
      <el-form :model="addFrom" status-icon  :rules="rules" ref="addRules">
        <el-form-item label="分类名称" label-width="80px" prop="classifyInfo">
          <el-input size="mini" v-model="addFrom.classifyInfo"></el-input>
        </el-form-item>
        <el-form-item label="分类介绍" label-width="80px">
          <el-input size="mini"
             type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              v-model="addFrom.classifyCustominfo1">
            </el-input>
        </el-form-item>
        <el-form-item label="所属频道" label-width="80px" prop="classifyChannelType">
            <el-select filterable clearable v-model="addFrom.classifyChannelType" size="mini" placeholder="所属频道">
              <el-option
                v-for="item in searhFormData.channelOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleAdd()"  size="mini">取 消</el-button>
        <el-button type="primary" @click="add('addRules')"  size="mini">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改频道-->
    <el-dialog title="修改频道"
    :visible.sync="dialog.updateBox"
    @close="closeUpdateRules('updateRules')"
    width="400px"
    :close-on-click-modal="false">
      <el-form :model="updateFrom" status-icon  :rules="rules" ref="updateRules">
        <el-form-item label="分类名称" label-width="80px" prop="classifyInfo">
          <el-input size="mini" v-model="updateFrom.classifyInfo"></el-input>
        </el-form-item>
        <el-form-item label="分类介绍" label-width="80px">
          <el-input size="mini"
             type="textarea"
              :autosize="{ minRows: 3, maxRows: 6}"
              v-model="updateFrom.classifyCustominfo1">
            </el-input>
        </el-form-item>
        <el-form-item label="所属频道" label-width="80px"  prop="classifyChannelType">
            <el-select filterable clearable v-model="updateFrom.classifyChannelType" size="mini" placeholder="所属频道">
              <el-option
                v-for="item in searhFormData.channelOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleUpdate()"  size="mini">取 消</el-button>
        <el-button type="primary" @click="update('updateRules')"  size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import bookClassifyController from '@/api/bookClassifyController/index'
import bookChannelController from '@/api/bookChannelController/index'
  export default {
    name:'classification',
    data(){
      return {
        loading:false,
        searhFormData:{
          stateOptions:[
            {id:0,text:'启用'},
            {id:1,text:'禁用'}
          ],
          channelOptions:null
        },
        getListData:{
          classifyChannelType:null,
          classifyInfo:null,
          classifyIsstart:null,
          pageSize:10,
          pageNum:1
        },
        paginationData:{
          currentPage:1,
          pageSizes:[10,20,30],
          pageSize:10,
          total:0
        },
        dataSource:null,
        dialog:{
          addBox:false,
          updateBox:false
        },
        rules:{
          classifyInfo:[
            {required:true,message:'请输入分类名称',trigger:'blur'}
          ],
           classifyChannelType:[
            {required:true,message:'请选择频道',trigger:'blur'}
          ]
        },
        addFrom:{
          classifyChannelType:null,
          classifyInfo:null,
          classifyIsstart:0,
          classifyCustominfo1:null
        },
        updateFrom:{
          classifyId:null,
          classifyChannelType:null,
          classifyInfo:null,
          classifyCustominfo1:null
        }
      }
    },
    created(){
      this.init();
      this.getList();
    },
    methods:{
      init(){
        this.getChannel();//获取频道
      },
      search(){
        this.paginationData.currentPage=1;
        this.getListData.pageNum=1;
        this.getList();
      },
      getChannel(){
        bookChannelController.getNoPage().then(response=>{
          this.searhFormData.channelOptions=response.data.list;
        })
      },
      getList(){
        let formData=this.getListData;
        this.loading=true;
          bookClassifyController.getList(formData).then(response=>{
            this.dataSource = response.data.list;
            this.paginationData.total=response.data.total;
            this.loading=false;
          }).catch(()=>{
            this.loading=false;
          })
      },
      cancleAdd(){
        this.dialog.addBox = false;
      },
      showAdd(data){
        this.dialog.addBox = true;
      },
      add(addRules){
        this.$refs[addRules].validate((valid) => {
          if(valid){
            this.loading=true;
            let formData=this.addFrom;
              bookClassifyController.add(formData).then(response=>{
                if(response.success){
                  this.getList();
                   this.dialog.addBox = false;
                  this.$message({
                    type:'success',
                    message:response.msg
                  })

                }
              this.loading=false;
            }).catch(()=>{
              this.loading=false;
            })
          }
        })
      },
      showUpdate(data){
        this.dialog.updateBox = true;
         this.updateFrom = {
          classifyId:data.classifyId,
          classifyChannelType:Number(data.classifyChannelType),
          classifyInfo:data.classifyInfo,
          classifyCustominfo1:data.classifyCustominfo1
        }
      },
      cancleUpdate(){
        this.dialog.updateBox = false;
      },
      clearAdd(){
        this.addFrom = {
          classifyChannelType:null,
          classifyInfo:null,
          classifyIsstart:0,
          classifyCustominfo1:null
        }
      },
      closeAddRules(addRules){
        this.clearAdd();
        this.$refs[addRules].resetFields();
      },
      closeUpdateRules(updateRules){
         this.$refs[updateRules].resetFields();
      },
      update(updateRules){
        this.$refs[updateRules].validate((valid) => {
          if(valid){
            this.loading=true;
            let formData=this.updateFrom;
              bookClassifyController.update(formData).then(response=>{
                if(response.success){
                  this.getList();
                  this.$message({
                    type:'success',
                    message:response.msg
                  })
                  this.dialog.updateBox = false;
                }
              this.loading=false;
            }).catch((()=>{
              this.loading=false;
            }))
          }
        })
      },
      updateStatus(data,state){
        let fromData = {
          classifyId:data.classifyId,
          classifyIsstart:state
        }
        let msg = state==0?'此操作会启用该频道，是否继续？':'此操作会禁用该频道，是否继续？';
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          bookClassifyController.updateStatus(fromData).then(response=>{
            if(response.success){
              this.getList();
              this.$message({
                type: 'success',
                message: response.msg
              });
            }
          })
        })
      },
      handleSizeChange(val) { // 修改每页显示条数 需要发送请求
        this.paginationData.pageSize=val;
        this.getListData.pageSize=val;
        this.getList();//重新获取当前页数据
      },
      handleCurrentChange(val) { // 修改当前页 需要发送请求
        this.paginationData.currentPage=val;
        this.getListData.pageNum=val;
        this.getList();//重新获取当前页数据
      }
    }
  }
</script>

<style scoped>
.header{
  margin-top: 20px;
}
.list{
  margin-top: 20px;
}
</style>
